@args boolean hall, String room
@extends(layout)


@section(topMenu) {
<a href="/rooms">@i18n("rooms")</a>
@ifNot(hall) {
}
}

<style>
  html {
    height: 100%;
  }

  form.chatform {
    padding: 20px;
    position: relative;
    bottom: 0;
  }

  input#msg {
    padding: 8px 5px;
  }

  #chat {
    position: relative;
    display: block;
    width: 100%;
    overflow-y: auto;
  }

  #chat .msg {
    padding: 8px;
    border: 1px solid #aaa;
    -webkit-border-radius:.5em;
    -moz-border-radius:.5em;
    border-radius: 0.5em;
    margin-bottom: 10px;
  }

  #chat .msg .from {
    padding-right: 0.5em;
  }
</style>

<div id="help-msg" class="alert alert-info alert-dismissible" role="alert">
  <button id="dismiss-help-msg" type="button" class="close" data-dismiss="alert" aria-label="Close"><span
      aria-hidden="true">&times;</span></button>
  @i18n("instruction")
</div>

<div id="chat" style="height:100%;width: 100%; overflow: auto;">
</div>

<form onsubmit="return false;" class="chatform row" action="">
  <input class="col-md-12 col-xs-12" type="text" name="message" id="msg" autofocus
         onkeypress="if(event.keyCode==13) { send(this.form.message.value); this.value='' } "/>
</form>

<script>
  @args User me, String room
  @if(me) {
      var me = {
          id: '@me.email',
          nickname: '@_session.get("nickname")'
      }
  } else {
      var me = {
          id: '@_session.id()',
          nickname: '@_session.get("nickname")'
      }
  }
    var room = '@room';

    function connect() {
        if (window.WebSocket) {
            var url = 'ws://' + location.hostname;
            var port = location.port;
            if (80 !== port && 443 !== port) {
                url = url + ':' + port;
            }
            url = url + '/api/v1/chat';
            var socket = new WebSocket(url);
            socket.onmessage = function (event) {
                var data = JSON.parse(event.data);
                console.log(data);
                if (room === data.room) {
                    received(data.text, data.from, data.nickname)
                }
            };
            return socket;
        } else {
            alert("Your browser does not support Websockets. (Use Chrome)");
            return false;
        }
    }

    var socket = connect();

    function received(msg, from, nickname) {
        if (from === me.id) {
            nickname = '@i18n("me")';
        }
        var $html = $('<div class="msg"><span class="from">' + nickname + ': </span><span class="text">' + msg + '</span></div>');
        $html.appendTo('#chat')
    }

    function send(msg) {
        if (!window.WebSocket) {
            return false;
        }
        if (socket.readyState === WebSocket.OPEN) {
            socket.send(JSON.stringify({room: '@room', text: msg, from: me.id, nickname: me.nickname}));
        } else {
            socket = connect();
            send(msg);
        }
        return false;
    }
    function resize() {
        var gap = 220;
        if ($('#help-msg').size() > 0) {
            gap = 300;
        }
        $('#chat').height($(window).height() - gap);
    }
    $(window).on('resize', resize).trigger('resize');
    $(window).on('click', resize);
</script>
